<template>
  <div :id="createdId">
    <div class="input-select el-input__inner" v-if="showSelect">
      <div class="tags" :class="!multipleSelectionTags.length&&'width100'">
        <el-tag v-for="(item, index) in multipleSelectionTags" closable :key="item[showkey]+index"
          @close="handleCloseTag(item)" size="small" type="info" effect="plain">{{item[showkey] || ''}}</el-tag>
        <input type="text" ref="selectInput"  :value="value" :placeholder="placeholderForTag" @focus="onfocus"
          @input="changeValue($event.target.value)">
        <i class="el-icon-arrow-down select-down" :class="visible&&'rotate180'" @click="focus2Input"></i>
      </div>
    </div>
    <!-- 单个 -->
    <el-input v-else :value="value" :disabled="disabled"  @input="changeValue" @focus="onfocus" @blur="onblur" :placeholder="placeholder"
      ref="inputValue" >
      <i class="el-icon-arrow-down select-down" :class="visible&&'rotate180'" slot="suffix" @click="focus2elInput"></i>
      </el-input>
    <div class="el-picker-panel" :style="pStyle" v-show="visible" ref="elcombogrid">
      <div class="table-container">
        <el-table v-loading="listLoading" :data="list" @row-click="rowClick" stripe size="mini"
          element-loading-text="Loading" ref="comboGridTable" fit border highlight-current-row
          @selection-change="handleSelectionChange" @select="handleSingelSelectionChange" max-height="450">
          <el-table-column type="selection" v-if="showSelect" width="55" align="center" />
          <el-table-column v-if="showIndex" label="序号" type="index" align="center" width="50"></el-table-column>
          <el-table-column v-for="item in columns" :type="item.type" :key="item.key" :label="item.label"
            :prop="item.key" :align="item.align" :width="item.width" :header-align="item.headerAlign">
            <template slot-scope="scope">
              <span>{{ scope.row[item.key] }}</span>
            </template>
          </el-table-column>
        
        </el-table>
        <el-pagination v-show="pagination" id="elpag" small :current-page.sync="listQuery.pageNum"
          :page-size.sync="listQuery.pageSize" :layout="layout" :page-sizes="pageSizes" :total="total"
          @current-change="changePage($event, 1)" @size-change="changePage($event, 0)" />
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request';

export default {
  name: "el-combo-grid",
  props: {
    placeholder: { type: String },
    value: { type: String },
    requestConfig: {
      default: () => {
        return {
          url: '',
          method: 'get'
        }
      }
    },
    columns: { type: Array },
    panelStyle: { type: String },
    keywordKey: { type: String },
    showIndex: { type: Boolean },
    pagination: { type: Boolean, default: true },
    otherParams: { default: () => { } },
    showSelect: { default: false },
    disabled:{ default: false },
    showkey: { type: String },
  },
  data() {
    return {
      visible: false,
      pStyle: 'width:600px',
      list: [],
      total: 0,
      layout: 'total, sizes, prev, pager, next, jumper',
      pageSizes: [5, 10, 20, 30, 50],
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 5
      },
      keyword: '',
      createdId: '0',
      multipleSelection: [],
      multipleSelectionTags: [],
      placeholderForTag: '',

    }
  },
  mounted() {
    this.createdId = String(new Date().getTime()) // 给个随机id 判断是否clickoutside
    this.placeholderForTag = this.placeholder
  },
  methods: {
    changePage(cur, type) {
      type ? this.listQuery.pageNum = cur : this.listQuery.pageSize = cur
      this.getList()
    },
    changeValue(val) {
      this.$emit('input', val)//向上级传送数据
      this.keyword = val
      this.listQuery.pageNum = 1
      this.getList()
    },
    onfocus(el) {
      this.pStyle = this.panelStyle + ';position:absolute;z-index:999999;'
      this.visible = true
      this.keyword = el.target.value
      document.removeEventListener('click', this.clickOutFn)
      document.addEventListener('click', this.clickOutFn)
      this.getList()
    },
    onblur(el) {
    },
    focus2Input() {
      if (this.visible) {
        this.$refs.selectInput.blur()
        this.visible = false
      } else {
        this.$refs.selectInput.focus()
      }
    },
    focus2elInput() {
      if (this.visible) {
        this.$refs.inputValue.blur()
        this.visible = false
      } else {
        this.$refs.inputValue.focus()
      }
    },
    getList() {
      for (let key in this.otherParams) {
        this.listQuery[key] = this.otherParams[key]
      }
      if (this.pagination) {
        this.listQuery[this.keywordKey] = this.keyword
      } else {
        if (this.keyword) {
          this.listQuery[this.keywordKey] = this.keyword
        } else {
          this.listLoading = false
          return //如果不分页，无keyword不查询数据（避免大数据量）
        }
      }
      this.listLoading = true
      this.multipleSelection.length = 0
      this.queryTableData(this.listQuery).then(response => {
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
        this.$nextTick(() => {
          // multipleSelectionTags 引用问题,无法与table数据全等。。。
          let ids = this.multipleSelectionTags.map(item => item.id)
          this.list.length && this.list.forEach((item, index) => {
            if (ids.includes(item.id)) {
              this.$refs.comboGridTable.toggleRowSelection(item)
            }
          })
        })
      })
    },
    queryTableData(params) {
      const reqObj = {
        url: this.requestConfig.url,
        method: this.requestConfig.method
      }
      let p = this.requestConfig.method === 'get' ? 'params' : 'data'
      reqObj[p] = params
      return request(reqObj)
    },
    rowClick: function (row, column, event) {
      if (this.showSelect) {
        this.$refs.comboGridTable.toggleRowSelection(row);
        this.$emit('input', '')
      } else {
        this.visible = false
        this.$emit('row-select-event', row, column, event)
        this.$emit('input', row[this.showkey]||row[this.keywordKey])
        document.removeEventListener('click', this.clickOutFn)
      }
    },
    clickOutFn(e) {
      if (e.path.some(item => item.id === this.createdId)) return
      this.visible = false
      document.removeEventListener('click', this.clickOutFn)
    },
    /**
     * 根据选择与上次的选择进行对比，处理tags
     * todo 聚焦状态。。。触发太多，暂不处理
     */
    handleSelectionChange(val) {
      if (this.multipleSelection.length === 0 && val.length === 0) return
      if (val.length > this.multipleSelection.length) {
        for (let item of val) {
          if (!this.multipleSelection.some(mitem => mitem.id === item.id)) {
            let ids = this.multipleSelectionTags.map(item => item.id)
            !ids.includes(item.id) && (this.multipleSelectionTags = this.multipleSelectionTags.concat(item))
          }
        }
      } else {
        for (let item of this.multipleSelection) {
          if (!val.some(mitem => mitem.id === item.id)) {
            let index = this.multipleSelectionTags.findIndex(mitem => mitem.id === item.id)
            for (let i = 0; i < this.list.length; i++) {
              if (this.list[i].id==this.multipleSelectionTags[index].id) {
                  this.list[i].stationCode=""; 
                  this.multipleSelectionTags[index].stationCode=undefined
              }                    
            }
            index > -1 && this.multipleSelectionTags.splice(index, 1)
          }
        }
      }
      this.multipleSelection = val
      this.placeholderForTag = this.multipleSelectionTags.length ? '' : this.placeholder
      this.$emit('getSelect', this.multipleSelectionTags)
     
     
      // this.$refs.selectInput.focus() todo..
    },
    /**
     * 处理单个复选框选择
     */
    handleSingelSelectionChange() {
      this.$emit('input', '')
    },
    handleCloseTag(item) {
      this.multipleSelectionTags.splice(this.multipleSelectionTags.findIndex(mitem => mitem.id === item.id), 1)
      this.$refs.comboGridTable.toggleRowSelection(item)
    }
  }
}
</script>

<style lang="scss" scoped>
.input-select {
  display: inline-block;
  position: relative;
  width: 100%;
  height: auto;
  min-width: 240px;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  font-size: inherit;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  .tags {
    min-height: 36px;
    flex-wrap: wrap;
    line-height: normal;
    white-space: normal;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    /deep/ .el-tag {
      margin-right: 3px;
      margin-bottom: 1px;
    }
    input {
      flex: 1;
      border: none;
      outline: none;
      padding: 0;
      color: #666;
      font-size: 14px;
      appearance: none;
      height: 28px;
      background-color: transparent;
      &::-webkit-input-placeholder {
        color: #c0c4cc;
      }
      &::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #c0c4cc;
      }
      &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #c0c4cc;
      }
      &:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #c0c4cc;
      }
    }
  }
  .width100 {
    width: 100%;
  }
  .select-down {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    transition: all 0.5s;
    color: #C0C4CC;
    &.rotate180 {
      transform: translateY(-50%) rotate(180deg);
    }
  }
}
/deep/ .el-pagination__sizes .el-input .el-input__inner,
/deep/ .el-pagination--small .el-pagination__editor.el-input .el-input__inner {
  border-color: #dcdfe6;
}
/deep/ .el-table__row .cell .el-input__inner{
  border-color: #dcdfe6;
}
</style>
